<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>葡萄干的阳光魔法 - 吐鲁番晾房晾晒全过程</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome图标 -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            earth: '#D2B48C',      // 土黄色（晾房墙体）
            wood: '#8B4513',       // 木色（支架）
            grape: '#6F2DA8',      // 葡萄紫
            sky: '#87CEEB',        // 天空蓝
            desert: '#F5DEB3',     // 沙漠色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            serif: ['Georgia', 'Cambria', 'serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
      .transition-smooth {
        transition: all 0.5s ease-in-out;
      }
      .wind-animation {
        animation: wind 3s infinite ease-in-out;
      }
      @keyframes wind {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(10px); }
      }
      .fade-in {
        animation: fadeIn 1s ease-in;
      }
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
    }
  </style>
</head>

<body class="bg-desert font-sans text-gray-800 overflow-x-hidden">
  <!-- 1. 首页引导区 -->
  <header id="home" class="relative h-screen flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 z-0">
      <img src="https://picsum.photos/id/1080/1920/1080" alt="吐鲁番晾房全景" class="w-full h-full object-cover opacity-80">
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60"></div>
    </div>
    
    <div class="relative z-10 text-center px-4 fade-in">
      <h1 class="text-[clamp(2rem,5vw,4rem)] font-bold text-white text-shadow mb-6">
        葡萄干的"阳光魔法"
      </h1>
      <p class="text-[clamp(1rem,2vw,1.5rem)] text-white text-shadow mb-10 max-w-3xl mx-auto">
        探秘吐鲁番晾房的自然晾晒工艺，从葡萄到葡萄干的神奇蜕变
      </p>
      <button id="startBtn" class="bg-earth hover:bg-earth/80 text-wood font-bold py-3 px-8 rounded-full text-lg transition-smooth transform hover:scale-105">
        开始探索 <i class="fa fa-arrow-down ml-2"></i>
      </button>
    </div>
  </header>

  <!-- 2. 晾房结构互动图解 -->
  <section id="structure" class="py-20 px-4 bg-white">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-center mb-12 text-wood">
        晾房的"通风密码"
      </h2>
      
      <div class="flex flex-col lg:flex-row gap-8 items-center">
        <!-- 晾房结构图 -->
        <div class="lg:w-1/2 relative">
          <div class="relative border-4 border-wood rounded-lg overflow-hidden bg-earth/30 p-4">
            <!-- 晾房主体 -->
            <img src="https://picsum.photos/id/164/800/600" alt="晾房结构图" class="w-full h-auto rounded">
            
            <!-- 可交互热点 -->
            <div id="holeHotspot" class="absolute top-1/3 left-1/4 w-12 h-12 cursor-pointer" title="四壁小孔">
              <div class="w-full h-full rounded-full bg-red-500/50 animate-pulse"></div>
            </div>
            <div id="frameHotspot" class="absolute top-1/2 left-2/3 w-12 h-12 cursor-pointer" title="木架系统">
              <div class="w-full h-full rounded-full bg-blue-500/50 animate-pulse"></div>
            </div>
            <div id="roofHotspot" class="absolute top-1/4 right-1/3 w-12 h-12 cursor-pointer" title="屋顶通风口">
              <div class="w-full h-full rounded-full bg-green-500/50 animate-pulse"></div>
            </div>
          </div>
        </div>
        
        <!-- 交互说明区 -->
        <div class="lg:w-1/2 bg-desert/50 p-6 rounded-lg border border-earth">
          <h3 class="text-xl font-bold mb-4 text-wood flex items-center">
            <i class="fa fa-info-circle mr-2"></i> 点击结构图中的热点了解细节
          </h3>
          <div id="structureInfo" class="min-h-[200px]">
            <p class="text-gray-700">吐鲁番晾房是当地劳动人民的智慧结晶，通过特殊结构实现天然晾晒。点击左侧图中的彩色热点，查看四壁小孔、木架系统和屋顶通风口的作用。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 3. 晾晒步骤时间轴 -->
  <section id="process" class="py-20 px-4 bg-gradient-to-b from-desert to-white">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-center mb-12 text-wood">
        葡萄干晾晒全过程
      </h2>
      
      <!-- 步骤导航 -->
      <div class="flex justify-center mb-10 overflow-x-auto pb-2">
        <div class="flex space-x-2 md:space-x-6">
          <button class="step-btn active px-3 py-2 rounded-full bg-wood text-white" data-step="1">采摘</button>
          <button class="step-btn px-3 py-2 rounded-full bg-earth/50 text-gray-700" data-step="2">挂架</button>
          <button class="step-btn px-3 py-2 rounded-full bg-earth/50 text-gray-700" data-step="3">干燥</button>
          <button class="step-btn px-3 py-2 rounded-full bg-earth/50 text-gray-700" data-step="4">分拣</button>
          <button class="step-btn px-3 py-2 rounded-full bg-earth/50 text-gray-700" data-step="5">成品</button>
        </div>
      </div>
      
      <!-- 步骤内容 -->
      <div class="step-content" id="step1">
        <div class="flex flex-col md:flex-row gap-8 items-center">
          <div class="md:w-1/2">
            <img src="https://picsum.photos/id/102/800/600" alt="葡萄采摘" class="w-full h-auto rounded-lg shadow-lg">
          </div>
          <div class="md:w-1/2">
            <h3 class="text-2xl font-bold mb-4 text-grape">1. 采摘：精选八分熟葡萄</h3>
            <p class="mb-4">果农在吐鲁番葡萄园手工采摘颗粒饱满、无破损的葡萄，此时葡萄成熟度约为80%——过熟易掉粒，欠熟则甜度不足。</p>
            <button id="pickInfoBtn" class="mt-2 text-grape hover:text-grape/80 font-medium flex items-center">
              查看采摘标准 <i class="fa fa-chevron-right ml-1"></i>
            </button>
            <!-- 采摘标准弹窗 -->
            <div id="pickModal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
              <div class="absolute inset-0 bg-black/50" id="pickModalOverlay"></div>
              <div class="relative bg-white rounded-lg p-6 max-w-md w-full shadow-2xl">
                <h4 class="text-xl font-bold mb-3 text-grape">采摘标准对比</h4>
                <div class="grid grid-cols-2 gap-4">
                  <div>
                    <img src="https://picsum.photos/id/106/400/300" alt="八分熟葡萄" class="w-full h-auto rounded mb-2">
                    <p class="text-sm">√ 八分熟：果皮有弹性，糖分积累充足</p>
                  </div>
                  <div>
                    <img src="https://picsum.photos/id/107/400/300" alt="过熟葡萄" class="w-full h-auto rounded mb-2">
                    <p class="text-sm">× 过熟：果皮软塌，易破损掉粒</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="step-content hidden" id="step2">
        <div class="flex flex-col md:flex-row gap-8 items-center">
          <div class="md:w-1/2">
            <img src="https://picsum.photos/id/118/800/600" alt="葡萄挂架" class="w-full h-auto rounded-lg shadow-lg">
          </div>
          <div class="md:w-1/2">
            <h3 class="text-2xl font-bold mb-4 text-grape">2. 挂架：疏松悬挂防霉变</h3>
            <p class="mb-4">工人将葡萄串均匀挂在晾房的木架横杆上，确保串与串之间留有空隙——重叠会导致通风不足，引发霉变。</p>
            
            <!-- 拖拽交互演示 -->
            <div class="mt-6 p-4 bg-earth/20 rounded-lg">
              <p class="text-sm mb-2">尝试拖动葡萄串，体验正确的挂架方式：</p>
              <div id="dragArea" class="h-32 border-2 border-dashed border-wood rounded relative">
                <div class="drag-item absolute top-4 left-4 w-16 h-16 cursor-move" draggable="true">
                  <img src="https://picsum.photos/id/108/100/100" alt="葡萄串" class="w-full h-full object-contain">
                </div>
                <div class="drag-item absolute top-4 left-32 w-16 h-16 cursor-move" draggable="true">
                  <img src="https://picsum.photos/id/108/100/100" alt="葡萄串" class="w-full h-full object-contain">
                </div>
                <div id="dragHint" class="hidden absolute inset-0 flex items-center justify-center bg-red-500/30">
                  <p class="text-red-700 font-bold">避免重叠！</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="step-content hidden" id="step3">
        <div class="flex flex-col md:flex-row gap-8 items-center">
          <div class="md:w-1/2">
            <div class="relative">
              <img id="dryingImg" src="https://picsum.photos/id/103/800/600" alt="葡萄干燥第1天" class="w-full h-auto rounded-lg shadow-lg">
              <div class="absolute bottom-4 left-0 right-0 px-4">
                <input type="range" id="dryingSlider" min="1" max="15" value="1" class="w-full accent-wood">
                <div class="flex justify-between text-sm text-gray-600 mt-1">
                  <span>第1天</span>
                  <span>第15天</span>
                </div>
              </div>
            </div>
          </div>
          <div class="md:w-1/2">
            <h3 class="text-2xl font-bold mb-4 text-grape">3. 干燥：自然通风的魔法</h3>
            <p id="dryingDesc" class="mb-4">第1天：葡萄饱满有光泽，水分含量约80%，晾房内的穿堂风开始带走表面水分。</p>
            <div class="p-4 bg-sky/20 rounded-lg flex items-center">
              <i class="fa fa-wind text-2xl text-sky mr-3 wind-animation"></i>
              <p class="text-sm">晾房四壁的菱形小孔形成空气对流，每天可带走葡萄5%-8%的水分，10-15天完成干燥。</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="step-content hidden" id="step4">
        <div class="flex flex-col md:flex-row gap-8 items-center">
          <div class="md:w-1/2">
            <img src="https://picsum.photos/id/127/800/600" alt="葡萄干分拣" class="w-full h-auto rounded-lg shadow-lg">
          </div>
          <div class="md:w-1/2">
            <h3 class="text-2xl font-bold mb-4 text-grape">4. 分拣：筛选优质葡萄干</h3>
            <p class="mb-4">干燥完成后，工人手工分拣葡萄干，去除未干透、破损或有杂质的果实，确保成品品质。</p>
            
            <!-- 分拣互动 -->
            <div class="mt-6">
              <p class="text-sm mb-2">点击下方葡萄干，挑出不合格的果实：</p>
              <div id="sortingArea" class="grid grid-cols-5 gap-2 p-4 bg-earth/20 rounded-lg">
                <div class="sort-item w-full aspect-square rounded-full overflow-hidden cursor-pointer" data-quality="good">
                  <img src="https://picsum.photos/id/137/100/100" alt="优质葡萄干" class="w-full h-full object-cover">
                </div>
                <div class="sort-item w-full aspect-square rounded-full overflow-hidden cursor-pointer" data-quality="bad">
                  <img src="https://picsum.photos/id/138/100/100" alt="劣质葡萄干" class="w-full h-full object-cover">
                </div>
                <div class="sort-item w-full aspect-square rounded-full overflow-hidden cursor-pointer" data-quality="good">
                  <img src="https://picsum.photos/id/137/100/100" alt="优质葡萄干" class="w-full h-full object-cover">
                </div>
                <div class="sort-item w-full aspect-square rounded-full overflow-hidden cursor-pointer" data-quality="bad">
                  <img src="https://picsum.photos/id/138/100/100" alt="劣质葡萄干" class="w-full h-full object-cover">
                </div>
                <div class="sort-item w-full aspect-square rounded-full overflow-hidden cursor-pointer" data-quality="good">
                  <img src="https://picsum.photos/id/137/100/100" alt="优质葡萄干" class="w-full h-full object-cover">
                </div>
              </div>
              <p id="sortingResult" class="mt-2 text-sm text-gray-600">已挑出 0/2 个不合格果实</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="step-content hidden" id="step5">
        <div class="flex flex-col md:flex-row gap-8 items-center">
          <div class="md:w-1/2">
            <img src="https://picsum.photos/id/139/800/600" alt="葡萄干成品" class="w-full h-auto rounded-lg shadow-lg">
          </div>
          <div class="md:w-1/2">
            <h3 class="text-2xl font-bold mb-4 text-grape">5. 成品：多元品种与风味</h3>
            <p class="mb-4">分拣后的葡萄干经过简单清洗（或直接包装），成为我们餐桌上的美味零食。吐鲁番葡萄干以品种丰富、甜度高闻名。</p>
            
            <!-- 品种切换 -->
            <div class="mt-6">
              <p class="text-sm mb-2">点击查看不同品种：</p>
              <div class="flex flex-wrap gap-2 mb-4">
                <button class="variety-btn active px-3 py-1 rounded-full bg-grape text-white text-sm" data-variety="white">无核白</button>
                <button class="variety-btn px-3 py-1 rounded-full bg-grape/30 text-gray-700 text-sm" data-variety="red">红香妃</button>
                <button class="variety-btn px-3 py-1 rounded-full bg-grape/30 text-gray-700 text-sm" data-variety="black">黑加仑</button>
              </div>
              <div id="varietyInfo" class="p-4 bg-earth/20 rounded-lg">
                <h4 class="font-bold text-grape">无核白葡萄干</h4>
                <p class="text-sm">最常见的品种，果肉晶莹剔透，甜度高达24%-26%，适合直接食用或烘焙。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 4. 互动模拟游戏 -->
  <section id="game" class="py-20 px-4 bg-wood/10">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-center mb-12 text-wood">
        成为晾房管理员
      </h2>
      
      <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="p-6 md:p-8">
          <p class="text-center mb-8">调节通风和晾晒天数，看看能否产出优质葡萄干！</p>
          
          <div class="flex flex-col md:flex-row gap-8 items-center">
            <!-- 模拟区域 -->
            <div class="md:w-1/2">
              <div class="relative border-4 border-wood rounded-lg overflow-hidden">
                <img id="gameGrapeImg" src="https://picsum.photos/id/102/800/600" alt="葡萄状态" class="w-full h-auto">
                <div id="gameResult" class="hidden absolute inset-0 flex items-center justify-center bg-black/60">
                  <div class="text-white text-center p-4">
                    <h3 class="text-2xl font-bold mb-2" id="resultTitle">优质葡萄干！</h3>
                    <p id="resultDesc">恭喜！你晾晒出了含水量15%的优质葡萄干</p>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 控制面板 -->
            <div class="md:w-1/2">
              <div class="space-y-6">
                <div>
                  <label class="block mb-2 font-medium text-wood">通风等级（小孔开启程度）</label>
                  <input type="range" id="windLevel" min="1" max="5" value="3" class="w-full accent-wood">
                  <div class="flex justify-between text-sm text-gray-600 mt-1">
                    <span>关闭</span>
                    <span>适中</span>
                    <span>全开</span>
                  </div>
                </div>
                
                <div>
                  <label class="block mb-2 font-medium text-wood">晾晒天数</label>
                  <input type="range" id="dayLevel" min="5" max="20" value="10" class="w-full accent-wood">
                  <div class="flex justify-between text-sm text-gray-600 mt-1">
                    <span>5天</span>
                    <span>12天</span>
                    <span>20天</span>
                  </div>
                </div>
                
                <button id="startGameBtn" class="w-full bg-wood hover:bg-wood/80 text-white font-bold py-3 rounded-lg transition-smooth">
                  开始晾晒 <i class="fa fa-sun-o ml-1"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 5. 知识拓展区 -->
  <section id="knowledge" class="py-20 px-4 bg-white">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-center mb-12 text-wood">
        葡萄干的趣味知识
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 知识卡片1 -->
        <div class="bg-desert/30 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-smooth">
          <img src="https://picsum.photos/id/110/600/400" alt="吐鲁番气候" class="w-full h-48 object-cover">
          <div class="p-5">
            <h3 class="text-xl font-bold mb-2 text-wood">为何只有吐鲁番能做？</h3>
            <p class="text-sm">吐鲁番年均降水量仅16毫米，年平均风速3-4级，干燥多风的气候是天然晾晒的完美条件，无需人工干预即可完成干燥。</p>
          </div>
        </div>
        
        <!-- 知识卡片2 -->
        <div class="bg-desert/30 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-smooth">
          <img src="https://picsum.photos/id/119/600/400" alt="晾晒 vs 烘干" class="w-full h-48 object-cover">
          <div class="p-5">
            <h3 class="text-xl font-bold mb-2 text-wood">传统晾晒 vs 现代烘干</h3>
            <p class="text-sm">传统晾晒保留更多营养（维生素、矿物质损失少），风味更浓郁；现代烘干效率高，但可能破坏部分活性成分。</p>
          </div>
        </div>
        
        <!-- 知识卡片3 -->
        <div class="bg-desert/30 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-smooth">
          <img src="https://picsum.photos/id/129/600/400" alt="葡萄干营养" class="w-full h-48 object-cover">
          <div class="p-5">
            <h3 class="text-xl font-bold mb-2 text-wood">营养小常识</h3>
            <p class="text-sm">葡萄干富含葡萄糖、膳食纤维和钾元素，100克葡萄干的铁含量相当于150克牛肉，但热量较高，建议每天食用不超过30克。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="bg-wood text-white py-8 px-4">
    <div class="max-w-6xl mx-auto text-center">
      <p>© 2023 葡萄干的阳光魔法 | 吐鲁番晾房文化科普</p>
      <p class="text-sm mt-2 opacity-80">图片来源于网络，仅作科普使用</p>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 1. 首页引导区 - 平滑滚动
    document.getElementById('startBtn').addEventListener('click', () => {
      document.getElementById('structure').scrollIntoView({ behavior: 'smooth' });
    });

    // 2. 晾房结构互动图解
    const structureInfo = document.getElementById('structureInfo');
    const hotspots = {
      holeHotspot: {
        title: "四壁小孔",
        content: "晾房四壁布满菱形小孔（孔径8-10厘米），呈品字形排列。这些小孔能引导空气形成穿堂风，是葡萄干燥的核心动力，每天可带走葡萄5%左右的水分。"
      },
      frameHotspot: {
        title: "木架系统",
        content: "内部木架分3-4层，用本地杨木或柳木制成。每层间距1.2-1.5米，上层通风最佳（5-7天干燥），下层湿度稍高（适合晚熟葡萄），避免阳光直射导致葡萄变质。"
      },
      roofHotspot: {
        title: "屋顶通风口",
        content: "尖顶设计便于排水，顶部预留通风口，与四壁小孔形成垂直气流循环，加速热空气排出，保持晾房内干燥凉爽的环境。"
      }
    };

    Object.keys(hotspots).forEach(id => {
      document.getElementById(id).addEventListener('click', () => {
        const data = hotspots[id];
        structureInfo.innerHTML = `
          <h4 class="text-lg font-bold mb-2 text-wood">${data.title}</h4>
          <p class="text-gray-700">${data.content}</p>
        `;
      });
    });

    // 3. 晾晒步骤时间轴
    // 步骤切换
    const stepBtns = document.querySelectorAll('.step-btn');
    const stepContents = document.querySelectorAll('.step-content');
    
    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const step = btn.getAttribute('data-step');
        
        // 更新按钮样式
        stepBtns.forEach(b => {
          b.classList.remove('active', 'bg-wood', 'text-white');
          b.classList.add('bg-earth/50', 'text-gray-700');
        });
        btn.classList.add('active', 'bg-wood', 'text-white');
        btn.classList.remove('bg-earth/50', 'text-gray-700');
        
        // 显示对应内容
        stepContents.forEach(content => content.classList.add('hidden'));
        document.getElementById(`step${step}`).classList.remove('hidden');
      });
    });

    // 采摘步骤弹窗
    const pickInfoBtn = document.getElementById('pickInfoBtn');
    const pickModal = document.getElementById('pickModal');
    const pickModalOverlay = document.getElementById('pickModalOverlay');
    
    pickInfoBtn.addEventListener('click', () => pickModal.classList.remove('hidden'));
    pickModalOverlay.addEventListener('click', () => pickModal.classList.add('hidden'));

    // 挂架步骤拖拽交互
    const dragItems = document.querySelectorAll('.drag-item');
    const dragArea = document.getElementById('dragArea');
    const dragHint = document.getElementById('dragHint');
    
    let draggedItem = null;
    
    dragItems.forEach(item => {
      item.addEventListener('dragstart', () => {
        draggedItem = item;
        setTimeout(() => item.classList.add('opacity-50'), 0);
      });
      
      item.addEventListener('dragend', () => {
        item.classList.remove('opacity-50');
        draggedItem = null;
        checkOverlap();
      });
    });
    
    dragArea.addEventListener('dragover', e => {
      e.preventDefault();
      const afterElement = getDragAfterElement(dragArea, e.clientY);
      if (afterElement == null) {
        dragArea.appendChild(draggedItem);
      } else {
        dragArea.insertBefore(draggedItem, afterElement);
      }
    });
    
    function getDragAfterElement(container, y) {
      const draggableElements = [...container.querySelectorAll('.drag-item:not(.opacity-50)')];
      return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;
        if (offset < 0 && offset > closest.offset) {
          return { offset: offset, element: child };
        } else {
          return closest;
        }
      }, { offset: Number.NEGATIVE_INFINITY }).element;
    }
    
    function checkOverlap() {
      const items = [...dragArea.querySelectorAll('.drag-item')];
      let overlap = false;
      
      items.forEach((item, i) => {
        const nextItem = items[i + 1];
        if (nextItem) {
          const rect1 = item.getBoundingClientRect();
          const rect2 = nextItem.getBoundingClientRect();
          if (rect1.right > rect2.left) overlap = true;
        }
      });
      
      dragHint.classList.toggle('hidden', !overlap);
    }

    // 干燥步骤滑块交互
    const dryingSlider = document.getElementById('dryingSlider');
    const dryingImg = document.getElementById('dryingImg');
    const dryingDesc = document.getElementById('dryingDesc');
    
    const dryingData = [
      { day: 1, img: 'https://picsum.photos/id/103/800/600', desc: '第1天：葡萄饱满有光泽，水分含量约80%，晾房内的穿堂风开始带走表面水分。' },
      { day: 3, img: 'https://picsum.photos/id/104/800/600', desc: '第3天：葡萄开始变软，表皮出现细微褶皱，水分含量降至65%左右。' },
      { day: 7, img: 'https://picsum.photos/id/105/800/600', desc: '第7天：果实明显皱缩，体积缩小约1/3，水分含量约40%，糖分开始浓缩。' },
      { day: 10, img: 'https://picsum.photos/id/117/800/600', desc: '第10天：葡萄干基本成型，表皮干燥有韧性，水分含量约20%。' },
      { day: 15, img: 'https://picsum.photos/id/137/800/600', desc: '第15天：完全干燥，水分含量≤15%，果肉呈深紫色，甜度达到峰值。' }
    ];
    
    dryingSlider.addEventListener('input', () => {
      const day = parseInt(dryingSlider.value);
      // 匹配最接近的天数数据
      const closest = dryingData.reduce((prev, curr) => 
        (Math.abs(curr.day - day) < Math.abs(prev.day - day) ? curr : prev)
      );
      
      dryingImg.src = closest.img;
      dryingDesc.textContent = closest.desc;
    });

    // 分拣步骤交互
    const sortItems = document.querySelectorAll('.sort-item');
    const sortingResult = document.getElementById('sortingResult');
    let badCount = 0;
    const totalBad = 2;
    
    sortItems.forEach(item => {
      item.addEventListener('click', () => {
        if (item.classList.contains('sorted')) return;
        
        item.classList.add('sorted', 'opacity-50');
        if (item.getAttribute('data-quality') === 'bad') {
          badCount++;
          item.classList.add('ring-2', 'ring-red-500');
        } else {
          item.classList.add('ring-2', 'ring-green-500');
        }
        
        sortingResult.textContent = `已挑出 ${badCount}/${totalBad} 个不合格果实`;
      });
    });

    // 成品步骤品种切换
    const varietyBtns = document.querySelectorAll('.variety-btn');
    const varietyInfo = document.getElementById('varietyInfo');
    
    const varietyData = {
      white: {
        title: "无核白葡萄干",
        desc: "最常见的品种，果肉晶莹剔透，甜度高达24%-26%，适合直接食用或烘焙。"
      },
      red: {
        title: "红香妃葡萄干",
        desc: "果肉呈浅红色，带有淡淡玫瑰香，颗粒较大（长约2厘米），富含花青素。"
      },
      black: {
        title: "黑加仑葡萄干",
        desc: "紫黑色果皮，果肉酸甜适中，富含维生素C和抗氧化物质，适合泡水或做果酱。"
      }
    };
    
    varietyBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const variety = btn.getAttribute('data-variety');
        const data = varietyData[variety];
        
        // 更新按钮样式
        varietyBtns.forEach(b => {
          b.classList.remove('active', 'bg-grape', 'text-white');
          b.classList.add('bg-grape/30', 'text-gray-700');
        });
        btn.classList.add('active', 'bg-grape', 'text-white');
        btn.classList.remove('bg-grape/30', 'text-gray-700');
        
        // 更新信息
        varietyInfo.innerHTML = `
          <h4 class="font-bold text-grape">${data.title}</h4>
          <p class="text-sm">${data.desc}</p>
        `;
      });
    });

    // 4. 互动模拟游戏
    const windLevel = document.getElementById('windLevel');
    const dayLevel = document.getElementById('dayLevel');
    const startGameBtn = document.getElementById('startGameBtn');
    const gameGrapeImg = document.getElementById('gameGrapeImg');
    const gameResult = document.getElementById('gameResult');
    const resultTitle = document.getElementById('resultTitle');
    const resultDesc = document.getElementById('resultDesc');
    
    startGameBtn.addEventListener('click', () => {
      const wind = parseInt(windLevel.value);
      const days = parseInt(dayLevel.value);
      
      // 游戏逻辑：通风3-5级且天数10-15天为最佳
      let result, title, desc, img;
      
      if (wind >= 3 && wind <= 5 && days >= 10 && days <= 15) {
        result = "success";
        title = "优质葡萄干！";
        desc = `恭喜！你用${wind}级通风和${days}天，晾晒出了含水量15%的优质葡萄干`;
        img = "https://picsum.photos/id/137/800/600";
      } else if (wind < 3) {
        result = "fail";
        title = "晾晒失败";
        desc = `通风不足（仅${wind}级），葡萄霉变了！晾房需要足够的穿堂风才能防止发霉`;
        img = "https://picsum.photos/id/138/800/600";
      } else if (days < 10) {
        result = "fail";
        title = "晾晒不足";
        desc = `${days}天时间太短，葡萄还没干透（水分含量>30%），容易变质`;
        img = "https://picsum.photos/id/105/800/600";
      } else {
        result = "fail";
        title = "过度晾晒";
        desc = `${days}天时间太长，葡萄干变得干硬，失去了柔软口感`;
        img = "https://picsum.photos/id/139/800/600";
      }
      
      // 更新结果
      gameGrapeImg.src = img;
      resultTitle.textContent = title;
      resultDesc.textContent = desc;
      gameResult.classList.remove('hidden');
      
      // 3秒后隐藏结果（可再次尝试）
      setTimeout(() => gameResult.classList.add('hidden'), 3000);
    });

    // 页面滚动动画
    window.addEventListener('scroll', () => {
      const sections = document.querySelectorAll('section');
      sections.forEach(section => {
        const rect = section.getBoundingClientRect();
        if (rect.top < window.innerHeight * 0.75) {
          section.classList.add('fade-in');
        }
      });
    });
  </script>
</body>
</html>
